import { useCallback, useEffect, useState } from 'react';
import { Image, List, Divider, Empty } from 'antd-mobile';
import moment from 'moment';
import { getMessage, TextWidget } from '@inbiz/react';
import { InbizIcon, useEvents } from '@inbiz/utils';
import defaultImg from '../../../icons/defaultImg.png';
import { getNewsList as getNewsListData, getCounts } from '../../../service';
import { NewsProps } from '../index';
import '../style.less';

const Summary: React.FC<NewsProps> = (props) => {
    const { showCate, loadNumber, fixNewKey, standOut, goMore, seeMore, dataLoadWap, showPositionWap, showTextWap, goToDetail } = props;

    const [data, setData] = useState<any[]>([]);
    const [configEvents] = useEvents(props.callBackEvents, props.emit)

    const getNewsList = useCallback(async (params: object) => {
        const newParams = (await configEvents.current?.onParams?.(params)) || params;
        const data = await (configEvents.current?.onRequest || getNewsListData)(newParams as any)
        return await configEvents.current?.onData?.(data) || data
    }, []);

    const getData = async () => {
        try {
            let res: News.NewsList = await getNewsList({
                categoryId: fixNewKey?.map((item: any) => { return item.id }).toString(),
                pageIndex: 1,
                pageSize: loadNumber?.threshold,
                showNew: standOut?.isStandout,
                numNew: standOut?.threshold || undefined,
            });
            let _ids = res?.ContentList?.map((item) => item?.ID);
            let counts = await getCounts({ entitylds: _ids });
            let _data = res?.ContentList?.map((item) => {
                let _item = counts?.data?.find((item2: { EntityId: string; }) => item2?.EntityId == item?.ID);
                if (_item) {
                    return {
                        ...item,
                        View: _item?.View
                    }
                } else {
                    return item
                }
            });
            setData(_data);
        } catch (error) {

        }
    };

    useEffect(() => {
        getData();
    }, [fixNewKey?.length, loadNumber, standOut]);

    return (
        <>{data?.length > 0 ? <div className="summary-content">
            <List>
                {data?.map(item => (
                    <div className="summary-list-item" onClick={() => { goToDetail(item) }}>
                        <List.Item
                            key={item.ID}
                            prefix={
                                <Image
                                    src={item?.ImgUrl == '/inbiz/wcm/UploadFile/Plugins/TextList/Content/Images/notfound.png' ? defaultImg : item?.ImgUrl}
                                    style={{ borderRadius: 6 }}
                                    fit='cover'
                                    width={112}
                                    height={63}
                                />
                            }
                            description={<span dangerouslySetInnerHTML={{ __html: item?.Summary || '' }}></span>}
                        >
                            {showCate ? `【${item?.ContentCategoryName}】${item?.Title}` : `${item?.Title}`}
                            {item?.IsNew && <div style={{ position: 'absolute', left: 0, top: 5 }}><InbizIcon type='icon-NEW' style={{ fontSize: 34 }} /></div>}
                        </List.Item>
                        <div className="summary-other">
                            <div className="summary-other-content">
                                <div>
                                    {item?.Creator?.length > 6 ? item?.Creator?.slice(0, 6) + '...' : item?.Creator}
                                </div>
                                <div>
                                    {item?.View + '浏览'}
                                </div>
                            </div>
                            <div className="summary-other-time">
                                {moment().isSame(new Date(item?.CreateTime), 'year') ? moment(item?.CreateTime).format('MM-DD') : item?.CreateTime}
                            </div>
                        </div>
                    </div>
                ))}
            </List>
            {
                seeMore &&
                    dataLoadWap === 'more' &&
                    showPositionWap === 'right-bottom' ?
                    <div
                        onClick={goMore}
                        style={{
                            padding: 0,
                            height: 40,
                            lineHeight: '40px',
                            fontSize: '12px',
                            color: 'var(--inbiz-color-text)',
                            textAlign: 'right',
                        }}
                    >
                        <TextWidget>{showTextWap || ''}</TextWidget>&nbsp;{'>'}
                    </div>
                    : null
            }
            {
                seeMore &&
                    dataLoadWap === 'more' &&
                    showPositionWap === 'bottom-center' ?
                    <Divider
                        style={{
                            margin: 0,
                            borderColor: '#ddd',
                            height: '40px',
                        }}
                    >
                        <div
                            onClick={goMore}
                            style={{
                                padding: 0,
                                fontSize: '12px',
                                color: 'var(--inbiz-color-text)',
                                textAlign: 'center',
                            }}
                        >
                            <TextWidget>{showTextWap || ''}</TextWidget>
                        </div>
                    </Divider>
                    : null
            }
        </div> : <Empty
            image={<InbizIcon type="icon-ic-zanwushuju" style={{ fontSize: '50px' }} />}
            description={getMessage('News.noData')}
        />}</>

    )
}
export default Summary;